<template>
  <view style="height: 100%">
    <view class="form-container" :style="styleObject">
      <wd-form ref="form" :model="myFormData">
        <template v-for="(item, index) in [...dataSource]" :key="index">
          <wd-input
            label-width="80px"
            v-if="item.type === 'input'"
            v-model="myFormData[item.key]"
            :label="item.label"
          />
          <template v-if="item.type === 'select'">
            <online-multi
              v-if="item.searchMode === 'multi'"
              :label="item.label"
              type="list_multi"
              :dict="item.dictCode"
              v-model="myFormData[item.key]"
            ></online-multi>
            <online-select
              v-else
              :label="item.label"
              type="list"
              :dict="item.dictCode"
              v-model="myFormData[item.key]"
            ></online-select>
          </template>
          <template v-if="item.type === 'date'">
            <wd-calendar
              v-if="item.searchMode === 'range'"
              label-width="80px"
              :type="getDateRangeType(item.format)"
              v-model="myFormData[item.key]"
              :label="item.label"
            />
            <online-date
              v-else
              :label="item.label"
              :type="getDateType(item.format)"
              v-model:value="myFormData[item.key]"
            ></online-date>
          </template>
        </template>
      </wd-form>
    </view>
    <view class="flex justify-evenly mt-14px">
      <wd-button plain type="info" @click="handleReset">重置</wd-button>
      <wd-button @click="handleSubmit">查询</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { echartProps } from '../props'
import OnlineSelect from '@/components/online/view/online-select.vue'
import OnlineMulti from '@/components/online/view/online-multi.vue'
import OnlineDate from '@/components/online/view/online-date.vue'
import { cache } from '@/common/uitls'
import dayjs from 'dayjs'
import weekday from 'dayjs/plugin/weekday'
import localeData from 'dayjs/plugin/localeData'
import { cloneDeep } from 'lodash-es'
dayjs.extend(weekday)
dayjs.extend(localeData)
// 定义 props
const props = defineProps(echartProps)
// 定义响应式数据
const dataSource = ref([])
const myFormData = ref({})
//关联组件刷新
let refreshComp = inject<any>('refreshComp')

// 计算属性
const styleObject = computed(() => {
  return {
    width: '100%',
    height: '240px',
    overflow: 'auto',
  }
})
/**
 * 获取日期类型
 * @param format
 */
const getDateType = (format) => {
  switch (format) {
    case 'YYYY':
      return 'year'
    case 'YYYY-MM':
      return 'year-month'
    default:
      return 'date'
  }
}
/**
 * 获取日期类型
 * @param format
 */
const getDateRangeType = (format) => {
  switch (format) {
    case 'YYYY':
      return 'daterange'
    case 'YYYY-MM':
      return 'monthrange'
    default:
      return 'daterange'
  }
}
//监听表单配置修改
watch(
  () => dataSource.value,
  () => {
    console.log('form   dataSource', dataSource.value)
    initFormData()
  },
)
// 重置方法
function handleReset() {
  initFormData()
  handleSubmit()
}
// 查询方法
function handleSubmit() {
  let queryFormData = {}
  dataSource.value.forEach((item) => {
    let value = myFormData.value[item.key]
    if (item.type == 'date') {
      if (item.searchMode === 'range' && value && value.length == 2) {
        let begin = dayjs(value[0]).format('YYYY-MM-DD')
        let end = dayjs(value[1]).format('YYYY-MM-DD')
        queryFormData[item.key] = [begin, end]
        queryFormData[item.key + '_begin'] = begin
        queryFormData[item.key + '_end'] = end
      } else {
        queryFormData[item.key] = dayjs(value).format('YYYY-MM-DD')
      }
    } else {
      queryFormData[item.key] = value
    }
  })
  console.log('form  handleSubmit', queryFormData)
  let linkageConfig = props.config.linkageConfig
  //1.判断联动配置是否存在
  if (linkageConfig && linkageConfig.length > 0) {
    //2.将数据处理配置项成需求的格式[{id:'123,params:{sex:'1'.age:2}]}]
    let linkageParams = linkageConfig.map((item) => {
      let paramsObj = {}
      item.linkage.forEach((field) => {
        //获取点击的对象的数值
        paramsObj[field.target] = queryFormData[field.source]
      })
      //缓存联动信息
      let cachedData = cache(item.linkageId)
      if (cachedData) {
        cache(item.linkageId, Object.assign(cachedData, paramsObj))
      } else {
        cache(item.linkageId, paramsObj)
      }
      return { id: item.linkageId, params: paramsObj }
    })
    refreshComp(linkageParams)
  }
}
/**
 * 获取日期
 * @param date
 * @param num
 * @returns
 */
function getDay(date, num) {
  return dayjs(date).add(num, 'days').startOf('days').format('YYYY-MM-DD HH:mm:ss')
}
/**
 * 设置modal初始默认值
 */
function initFormData() {
  myFormData.value = {}
  dataSource.value.forEach((item) => {
    try {
      //日期默认值支持昨天、今天，明天
      if (!item?.format) {
        item.format = 'YYYY-MM-DD'
      }
      if (item.value && item.type == 'date') {
        let value = item.value
        if (item.value.startsWith('=dateStr')) {
          let regex = /\(([^)]+)\)/ // 匹配括号及其内容，捕获括号内的内容
          let match = item.value.match(regex)
          if (match) {
            let day = match[1] // match[1] 是捕获组的内容
            value = getDay(new Date(), day)
          }
        }
        myFormData.value[item.key] = dayjs(value).valueOf()
      } else {
        myFormData.value[item.key] = item.value ? item.value : null
      }
    } catch (e) {
      console.log('初始化表单数据失败', e)
    }
  })
}
async function queryData() {
  if (!props.config.dataSetId) {
    //静态数据处理字典编码
    dataSource.value = handleData()
  }
}
/**
 * 处理数据成需求格式
 * @param result
 */
function handleData() {
  let fields = cloneDeep(props.config.option?.fields) || []
  let arr = []
  if (fields && fields.length > 0) {
    //判断有code的情况下，设置成select
    fields.forEach((field) => {
      if (field.izSearch == '1') {
        arr.push({
          label: field['fieldTxt'],
          key: field['fieldName'],
          type: field['widgetType'],
          dictCode: field['dictCode'],
          searchMode: field['searchMode'],
          value: field['defaultValue'],
          format: field['dateFormat'],
        })
      }
    })
  }
  return arr
}
// 生命周期钩子
onMounted(() => {
  queryData()
})
</script>

<style scoped lang="scss">
.form-container {
  :deep(.wd-cell-group__body) {
    background-color: #f1f1f1;
  }
  .onlineLoader-form {
    :deep(.wd-input__label-inner) {
      font-size: 16px;
    }
    :deep(.wd-picker__label) {
      font-size: 16px;
    }
    :deep(.wd-select-picker__label) {
      font-size: 16px;
    }
    :deep(.wd-cell__title) {
      font-size: 16px;
    }
    :deep(.wd-textarea__label-inner) {
      font-size: 16px;
    }
    :deep(.wd-input__label.is-required) {
      padding-left: 0px;
    }
    :deep(.wd-input__label.is-required::after) {
      left: -10px;
    }
    :deep(.wd-textarea__clear) {
      color: #bfbfbf;
    }
    :deep(.wd-select-picker__clear) {
      color: #bfbfbf;
    }
    :deep(.wd-input__clear) {
      color: #bfbfbf;
    }
    :deep(.wd-upload__close) {
      color: #bfbfbf;
    }
  }
}
</style>
